<template>
  <!-- destroy-on-close: 关闭之后销毁组件 -->
  <FormDrawer
    size="70%"
    ref="formDrawerRef"
    title="设置商品详情"
    @submit="submit"
    @cancel="handleCancel"
    :destroy-on-close="true"
  >
    <el-form :model="form" ref="formRef">
      <el-form-item label="规格类型" prop="form.sku_type">
        <el-radio-group v-model="form.sku_type">
          <el-radio :label="0">单规格</el-radio>
          <el-radio :label="1">多规格</el-radio>
        </el-radio-group>
      </el-form-item>

      <template v-if="form.sku_type === 0">
        <el-form-item label="市场价格" prop="oprice">
          <el-input v-model="form.sku_value.oprice" style="width: 35%">
            <template #append>
              <div>元</div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="销售价格">
          <el-input v-model="form.sku_value.pprice" style="width: 35%">
            <template #append>
              <div>元</div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="成本价格">
          <el-input v-model="form.sku_value.cprice" style="width: 35%">
            <template #append>
              <div>元</div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="商品重量">
          <el-input v-model="form.sku_value.weight" style="width: 35%">
            <template #append>
              <div>公斤</div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="商品体积">
          <el-input v-model="form.sku_value.volume" style="width: 35%">
            <template #append>
              <div>立方米</div>
            </template>
          </el-input>
        </el-form-item>
      </template>

      <template v-else>
        <sku-card />
        <sku-table />
      </template>
    </el-form>
  </FormDrawer>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { readGoodsApi, updateGoodsSkusApi } from '@/api/goods'
  import FormDrawer from '@/components/FormDrawer.vue'
  import SkuCard from './components/SkuCard.vue'
  import SkuTable from '@/components/SkuTable.vue'
  import { toast } from '@/utils'
  import { goodsId, initSkuCardList, sku_list } from '@/hooks/useSku.js'

  const emit = defineEmits(['reloadData'])
  const formDrawerRef = ref(null)
  const form = reactive({
    sku_type: 0,
    sku_value: {
      oprice: 0,
      pprice: 0,
      cprice: 0,
      weight: 0,
      volume: 0,
    },
  })

  function submit() {
    formDrawerRef.value.showLoading()
    let data = {
      sku_type: form.sku_type,
      sku_value: form.sku_value
    }
    if(form.sku_type == 1) {
      data.goodsSkus = sku_list.value
    }
    updateGoodsSkusApi(goodsId.value, data)
      .then((res) => {
        toast('设置商品规格成功')
        formDrawerRef.value.close()
        emit('reloadData')
      })
      .finally(() => formDrawerRef.value.hideLoading())
  }

  function open(row) {
    goodsId.value = row.id
    row.skusLoading = true
    readGoodsApi(goodsId.value)
      .then((res) => {
        form.sku_type = res.sku_type
        form.sku_value = res.sku_value || {
          oprice: 0,
          pprice: 0,
          cprice: 0,
          weight: 0,
          volume: 0,
        }

        initSkuCardList(res)

        formDrawerRef.value.open()
      })
      .finally(() => (row.skusLoading = false))
  }

  const formRef = ref(null)
  function handleCancel() {
    formRef.value.resetFields()
    formDrawerRef.value.close()
  }
  defineExpose({
    open,
  })
</script>

<style scoped></style>
